<script setup>
import { ref, onMounted, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { Setting, UserFilled, User, Crop, EditPen, SwitchButton, CaretBottom, Pointer, Operation, Calendar, Mouse } from '@element-plus/icons-vue'
import axios from 'axios'
// import { userAuthsTwoService } from '@/api/user.js'
// import { useUserStore } from '@/stores'
// const userStore = useUserStore()
const router = useRouter()
// 左侧菜单数据和图标
const menuLevelOne = ref([])
const menuLevelTwo = ref([])
const menuLevelThree = ref([])
// 一级菜单图标
const menuIconOne = shallowRef({
  5: Setting,
  6: UserFilled
})
// 二级菜单图标
const menuIconTwo = shallowRef({
  7: Operation,
  8: Crop,
  9: Pointer,
  10: EditPen
})
// 三级菜单图标
const menuIconThree = shallowRef({
  11: User,
  12: Mouse,
  13: Calendar
})
const getMenuData = async () => {
  // const res = await userAuthsTwoService('type=tree')
  const res = await axios({
    url: 'http://127.0.0.1/tp5/public/index.php/auths',
    // method: 'resource',
  })
  console.log('菜单数据',res)
  // 过滤出一级菜单数据
  const resOne = res.data.data.filter(v => v.pid === 2);
  menuLevelOne.value = resOne
  const resTwo = res.data.data.filter(v => v.pid === 5);
  menuLevelTwo.value = resTwo
  const resThree = res.data.data.filter(v => v.pid === 6);
  menuLevelThree.value = resThree
}

// 生命周期
onMounted(() => {
  // userStore.getUser()
  getMenuData()
})
</script>

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
        unique-opened
      >
        <el-sub-menu index="1">
          <!--多级菜单标题 #号是 具名插槽 title-->
          <template #title>
            <!--<el-icon><Setting /></el-icon>-->
            <el-icon>
              <component :is="menuIconOne[5]"></component>
            </el-icon>
            <span>系统配置</span>
          </template>
          <!--展开的下拉菜单 - 默认插槽-->
          <el-menu-item index="/user/profile" v-for="item in menuLevelTwo" :key="item.id">
            <!--<el-icon><User /></el-icon>-->
            <el-icon>
              <component :is="menuIconTwo[item.id]"></component>
            </el-icon>
            <span>{{item.auth_name}}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <!--多级菜单标题 #号是 具名插槽 title-->
          <template #title>
            <!--<el-icon><UserFilled /></el-icon>-->
            <el-icon>
              <component :is="menuIconOne[6]"></component>
            </el-icon>
            <span>权限管理</span>
          </template>
          <!--展开的下拉菜单 - 默认插槽-->
          <el-menu-item index="/user/profile" v-for="item in menuLevelThree" :key="item.id">
            <!--<el-icon><User /></el-icon>-->
            <el-icon>
              <component :is="menuIconThree[item.id]"></component>
            </el-icon>
            <span>{{item.auth_name}}</span>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>
    <el-main>
      <transition name="fade-slide-leave">
        <router-view></router-view>
      </transition>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.el-menu{
  height: 100%;
}
</style>